<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/conmon.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./lib/css/style.css">


    <!-- 轮播图插件 -->
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <!-- <script src="http://www.jq22.com/jquery/1.4.4/jquery.min.js"></script> -->
    <script src="./lib/js/prefixfree.min.js"></script>
    <script src="./lib/js/zoom-slideshow.js"></script>

    <script src="lib2/js/flux.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
    <!-- 头部 -->
    <header class=" cf">
        <div class="bg container-full  cf">
            <div class="container one cf">
                <a class="lf lol" href="#">legochina.cn</a>
                <p class="rf">
                    欢迎光临<a href="register.html">乐购</a>,请登录/ <a href="register.html">注册</a>
                </p>
                <img src="./imgs/logo.jpg" alt="">
            </div>
        </div>

        <!-- 搜索框 -->
        <div class="container ">
            <!-- 购物车 -->
            <div class="car rf">
                <a href="#">购物车 3</a>
                <a href="shopping-cart.html">我的订单</a>
            </div>

            <!-- 搜索框 -->
            <div class="search-box rf ">

                <input type="text" placeholder="创意文具">
                <input type="submit" value="">
            </div>
        </div>

        <!-- 文字导航 -->
        <nav class="navtext container cf">
            <ul class="cf">
                <li>
                    <a href="product-list.html">图书</a>
                </li>
                <li><a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">原创文字</a></li>
                <li>
                    <a href="#">服装</a></li>
                <li>
                    <a href="#">运动户外</a></li>
                <li>
                    <a href="#">儿童装</a></li>
                <li>
                    <a href="#">家居</a></li>
                <li>
                    <a href="#">创意文具</a></li>
                <li>
                    <a href="#">地方特产</a></li>
                <li>
                    <a href="#">海外购</a>
                </li>
                <li>
                    <a href="#">电器城</a>
                </li>
            </ul>
        </nav>
    </header>
    

    <!-- 主体 -->
    <main>
        <!-- 轮播图 左边-->
        <section class="container  cf swiper">
            <div class="lf lefttext ">
                <ul>
                    <li>
                        <p>
                            <a href="#">图书</a>、
                            <a href="#">电子书</a>、
                            <a href="#">童书1</a>
                        </p>
                        <dl>
                            <p>
                                <a href="#">图书馆>></a>
                                <a href="#">儿童书馆>></a>
                                <a href="#">电子书馆>></a>
                            </p>
                            <dt>文艺1</dt>
                            <dd>
                                <a href="#">小说 </a>
                                <a href="#">文学 </a>
                                <a href="#">传记 </a>
                                <a href="#">青春 </a>
                                <a href="#">动漫 </a>
                                <a href="#">艺术 </a>
                                <a href="#">摄影 </a>
                                <a href="#">明星</a>
                            </dd>

                        </dl>
                    </li>
                    <li>
                        <p>
                            <a href="#">图书</a>、
                            <a href="#">电子书</a>、
                            <a href="#">童书2</a>
                        </p>
                        <dl>
                            <p>
                                <a href="#">图书馆>></a>
                                <a href="#">儿童书馆>></a>
                                <a href="#">电子书馆>></a>
                            </p>
                            <dt>文艺2</dt>
                            <dd>
                                <a href="#">小说 </a>
                                <a href="#">文学 </a>
                                <a href="#">传记 </a>
                                <a href="#">青春 </a>
                                <a href="#">动漫 </a>
                                <a href="#">艺术 </a>
                                <a href="#">摄影 </a>
                                <a href="#">明星</a>
                            </dd>

                        </dl>
                    </li>
                    <li>
                        <p>
                            <a href="#">图书</a>、
                            <a href="#">电子书</a>、
                            <a href="#">童书3</a>
                        </p>
                        <dl>
                            <p>
                                <a href="#">图书馆>></a>
                                <a href="#">儿童书馆>></a>
                                <a href="#">电子书馆>></a>
                            </p>
                            <dt>文艺3</dt>
                            <dd>
                                <a href="#">小说 </a>
                                <a href="#">文学 </a>
                                <a href="#">传记 </a>
                                <a href="#">青春 </a>
                                <a href="#">动漫 </a>
                                <a href="#">艺术 </a>
                                <a href="#">摄影 </a>
                                <a href="#">明星</a>
                            </dd>

                        </dl>
                    </li>
                    <li>
                        <p>
                            <a href="#">图书</a>、
                            <a href="#">电子书</a>、
                            <a href="#">童书4</a>
                        </p>
                        <dl>
                            <p>
                                <a href="#">图书馆>></a>
                                <a href="#">儿童书馆>></a>
                                <a href="#">电子书馆>></a>
                            </p>
                            <dt>文艺4</dt>
                            <dd>
                                <a href="#">小说 </a>
                                <a href="#">文学 </a>
                                <a href="#">传记 </a>
                                <a href="#">青春 </a>
                                <a href="#">动漫 </a>
                                <a href="#">艺术 </a>
                                <a href="#">摄影 </a>
                                <a href="#">明星</a>
                            </dd>

                        </dl>
                    </li>
                </ul>


            </div>
            <!-- 轮播图右边 -->
            <div class="slider">
                <!-- 轮播图内容 -->
                <div id="zoom"></div>
                <div id="wrapper">
                    <div id="head">
                        <!-- <h1>Zoom SlideShow - jQuery Plugin</h1> -->
                    </div>
                    <div id="content">
                        <div id="view">
                            <img src="./lib/media/img/nature1.jpg" alt="" />
                        </div>
                        <div id="thumbs">
                            <div id="nav-left-thumbs">&lt;</div>
                            <div id="pics-thumbs">
                                <img src="./lib/media/img/nature1.jpg" alt="">
                                <img src="./lib/media/img/nature2.png" alt="">
                                <img src="./lib/media/img/nature2.png" alt="">
                                <img src="./lib/media/img/nature3.png" alt="">
                                <img src="./lib/media/img/nature4.png" alt="">
                            </div>
                            <div id="nav-right-thumbs">&gt;</div>
                        </div>
                    </div>
                </div>

        </section>
        <!-- 今日推荐 -->
        <section class="container  cf today">
            <!-- 今日推荐内容 -->
            <h3 class="theme-color">乐购·今日推荐</h3>
            <div class="container"></div>
            <ul class="cf  lb">
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>
                <li class="text-center  lf">
                    <img src="./imgs/re-demo.jpg" alt="">
                    <p class="theme-bg first-p">限时抢</p>
                    <p>黑爵青蜂侠六🗡电竞游戏鼠标</p>
                    <p class="theme-color">全国联保 一年免费包换</p>
                    <p class="theme-color">$:299</p>
                </li>


            </ul>
        </section>
        <!-- 电子书 -->
        <section class="container cf e-book">
            <!-- 最上面部分 -->
            <div class=" cf ">
                <h3 class="lf">电子书 图书</h3>
                <p class="rf p-span">
                    <span class="">最新上架</span>
                    <span>独家畅销</span>
                    <span>电子书</span>
                </p>
            </div>
            <!-- 中间一条线 -->
            <div class="line-5"></div>
            <!-- 左边主体 -->
            <div class="e-book-left lf  cf">
                <div class="e-book-left-small lf ">
                    <img src="./imgs/ebook-demo1.jpg" alt="">
                    <p>
                        <a href="#">中小学教辅</a>
                        <a href="#">外语</a>
                        <a href="#">考试</a>
                    </p>
                    <p>
                        <a href="#">中小学教辅</a>
                        <a href="#">外语</a>
                        <a href="#">考试</a>
                    </p>
                    <p>
                        <a href="#">中小学教辅</a>
                        <a href="#">外语</a>
                        <a href="#">考试</a>
                    </p>
                    <p>
                        <a href="#">中小学教辅</a>
                        <a href="#">外语</a>
                        <a href="#">考试</a>
                    </p>
                </div>

                <!-- 左边大的主体 -->
                <div class="e-book-left-big lf ">
                    <ul class="cf show ">
                        <!-- 第一个li 的轮播图 -->
                        <li class="lf first-li">
                            <div id="slider">
                                <img src="img/avatar.jpg" alt="" />
                                <img src="img/ironman.jpg" alt="" />
                                <img src="img/tron.jpg" alt="" />
                                <img src="img/greenhornet.jpg" alt="" />
                            </div>
                        </li>
                        <!-- 第一个li 的轮播图结束 -->

                        <li class="lf">
                            <p>奥运狂欢111</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                    </ul>

                    <ul class="cf ">
                        <!-- 第2个li 的轮播图 -->
                        <li class="lf first-li">
                            <div id="slider1">
                                <img src="img/avatar.jpg" alt="" />
                                <img src="img/ironman.jpg" alt="" />
                                <img src="img/tron.jpg" alt="" />
                                <img src="img/greenhornet.jpg" alt="" />
                            </div>
                        </li>
                        <!-- 第一个li 的轮播图结束 -->

                        <li class="lf">
                            <p>奥运狂欢222</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                    </ul>
                    <ul class="cf ">
                        <!-- 第3个li 的轮播图 -->
                        <li class="lf first-li">
                            <div id="slider2">
                                <img src="img/avatar.jpg" alt="" />
                                <img src="img/ironman.jpg" alt="" />
                                <img src="img/tron.jpg" alt="" />
                                <img src="img/greenhornet.jpg" alt="" />
                            </div>
                        </li>
                        <!-- 第一个li 的轮播图结束 -->

                        <li class="lf">
                            <p>奥运狂欢333</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                        <li class="lf">
                            <p>奥运狂欢</p>
                            <p class="theme-color">十万种电子书 直降40%</p>
                            <img src="./imgs/ebook-demo2.jpg" alt="">
                            <p class="theme-color">$49 <span><del>$79</del></span></p>
                        </li>
                    </ul>

                </div>
            </div>
            <!-- 右边主体 -->
            <div class="e-book-right  rf ">
               <ul>
                     <h3>新书畅销榜</h3>
                   <li class="cf">
                       <p class="li-p hide-p">1.就喜欢你看不惯我,又干不掉我</p>
                       <div class="cf first-div-tp">
                           <img class="lf" src="./imgs/ebook-demo3.jpg" alt="">
                           <p class="">
                            从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                           </p>
                       </div>
                   </li>
                   <!-- 第二个 -->
                   <li class="cf">
                    <p class="li-p">2.就喜欢你看不惯我,又干不掉我</p>
                    <div class="cf">
                        <img class="lf" src="./imgs/ebook-demo3.jpg" alt="">
                        <p class="">
                         从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                        </p>
                    </div>
                </li>
                <li class="cf">
                    <p class="li-p">3.就喜欢你看不惯我,又干不掉我</p>
                    <div class="cf">
                        <img class="lf" src="./imgs/ebook-demo3.jpg" alt="">
                        <p class="">
                         从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                        </p>
                    </div>
                </li>
                <li class="cf">
                    <p class="li-p">4.就喜欢你看不惯我,又干不掉我</p>
                    <div class="cf">
                        <img class="lf" src="./imgs/ebook-demo3.jpg" alt="">
                        <p class="">
                         从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                        </p>
                    </div>
                </li>
                <li class="cf">
                    <p class="li-p">5.就喜欢你看不惯我,又干不掉我</p>
                    <div class="cf">
                        <img class="lf" src="./imgs/ebook-demo3.jpg" alt="">
                        <p class="">
                         从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                        </p>
                    </div>
                </li>
                <li class="cf">
                    <p class="li-p">6.就喜欢你看不惯我,又干不掉我</p>
                    <div class="cf">
                        <img class="lf" src="./imgs/ebook-demo3.jpg" alt="">
                        <p class="">
                         从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                        </p>
                    </div>
                </li>
                <li class="cf">
                    <p class="li-p">7.就喜欢你看不惯我,又干不掉我</p>
                    <div class="cf">
                        <img class="lf" src="./imgs/ebook-demo3.jpg" alt="">
                        <p class="">
                         从你的世界路过入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读
                        </p>
                    </div>
                </li>
                   
               </ul>
            </div>
        </section>
        <!-- 服装 -->
        <section class="container  cf  clothing">
            <img src="./imgs/cloth.jpg" alt="">
            
        </section>
        <!-- 户外运动 -->
        <section class="container  cf sport">
            <img src="./imgs/sport.png" alt="">
        </section>
        <!-- 童装 -->
        <section class="container  cf kids">
            <img src="./imgs/child.png" alt="">
        </section>
        <!-- 家具日用 -->
        <section class="container  cf home">
            家具日用
        </section>
        <!-- 推广商品 -->
        <section class="container  cf swag">
            <img src="./imgs/house.png" alt="">
        </section>
    </main>
    <!-- 尾部 -->
    <div class="container theme-bg-theme"></div>
    <footer>
        <div class="container-full footer-div">
           <ul class="container four-picture cf">
               <li class="lf"></li>
               <li class="lf"></li>
               <li class="lf"></li>
               <li class="lf"></li>
           </ul>
        </div>

        <div class="container footer-last cf">
                <ul class="lf">
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                </ul>
                <ul class="lf">
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                </ul>
                <ul class="lf">
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                </ul>
                <ul class="lf">
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                </ul>
                <ul class="lf">
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                    <li>购物指南</li>
                </ul>
                <img src="./imgs/logo_00.png" class="rf">
        </div>
        <div class="last container">
                <p>公司简介 | &emsp;  公司简介 | &emsp; 公司简介 | &emsp; 公司简介 | &emsp; 公司简介 | &emsp; 公司简介 | &emsp; 公司简介 | &emsp; 公司简介 | &emsp;  </p>
                <p>cop 乐购网2004-2016</p>
        </div>
    </footer>

    <!-- 楼层 -->
    
      <div class="foolr text container">
        <ul class="floor-ul">
            <li>
                <span>图书</span>
            </li>
            <li>
                <span>
                    男装
                </span>
            </li>
            <li>
                <span>运动</span>
            </li>
            <li>
                <span>女装</span>
            </li>
            <li><span>衣柜</span></li>
        </ul>
      </div>

      <!-- 最上面搜索框 -->
    <div class="search-top container ">
             <input type="text" placeholder="创意文具">
            <button type="submit"></button> 
    </div> 
    
    <script src="./js/index.js"></script>

</body>

</html>